<template>
	<view class="register-doctor">
		<Search :real='true' @search='onSearch' placeholder='请输入医生名称进行搜索' />
		<RegisterListHeader />
		<view class="register-doctor-main">
			<u-tabs :active-color='themeColorLight' bar-width='100' :list="tabLists" :is-scroll="false" :current="currentTab" @change="change"></u-tabs>
			<view class="register-doctor-main-warp">
				<view class="item u-border-bottom flexR" v-for="(item, index) in dataList" :key="index"  @click="toPage(item)">
					<view class="left">
					<!-- <text>{{'@static/images/'+item.imagePath}}</text> -->
						<image :src="'../../static/images/'+item.imagePath" mode="scaleToFill"></image>
					</view>
					<view class="right">
						<view class="title flexR">
							<view class="title-left">
								<text>{{item.name+"("+item.branchCode+")"}}</text>
								<u-tag :text="item.jobTitle" mode="dark" :bg-color='tagBgColor' color='#555555' shape='square'/>
							</view>
							<view style="height: 100%;width: 20px; text-align: center;">
								<u-icon color="#A5A5A5" name="arrow-right"></u-icon>
							</view>
						</view>
						<view class="row" style="color: #3DDFD2;">
							<text>科室：</text>{{item.deptName}}
						</view>
						<view class="row sc" style="color: #A5A5A5;">
							<text>擅长：</text>{{item.expertise}}
						</view>
					</view>
				</view>
				<view style="margin: 20rpx;" v-if="dataList.length">
					<u-loadmore :status="status" @loadmore='getData' :load-text='loadText'/>
				</view>
				<u-empty text="暂无医生列表" mode="list" v-if="dataList.length===0"></u-empty>
			</view>
		</view>
		<Load :load='load'></Load>
	</view>
</template>

<script>
	import RegisterListHeader from '../../components/RegisterListHeader'
	import Search from '../../components/Search/index.vue'
	import Load from '@/components/Load/index.vue'
	import  { themeColorLight, tagBgColor } from '@/static/js/theme.js'
	import { getDoctorList } from '../../api/register.js'
	import { mapGetters } from 'vuex'
	import dayjs from 'dayjs'
	export default {
		components:{ RegisterListHeader, Search,  Load },
		data() {
			return {
				themeColorLight,tagBgColor,
				loadText: {
					loadmore: '点击加载更多',
					nomore:'没有更多了',
					loading:'努力加载中'
				},
				tabLists:[{ name:"今日排班" }, { name:'全部医生' }],
				currentTab:0,
				dataList:[], // []
				dataAll:[],
				status:'loadmore',
				allStatus:'loadmore',
				date:dayjs().format('YYYY-MM-DD'),
				page:1,
				size:10,
				name:'',
				load:false
			}
		},
		created() {
			this.getData(this.date)
		},
		computed:{
			...mapGetters(['baseApi'])
		},
		methods:{
			change(val){
				this.currentTab = val
				this.dataList = []
				this.page = 1
				if(val === 0){
					this.date = dayjs().format('YYYY-MM-DD')
				}else{
					this.date = ''
				}
				this.getData()
			},
			getData(){
				const params = {
					pageNo: this.page,
					pageSize: this.size,
					execDate: this.date,
					doctorName:this.name
				}
				this.load = true;
				this.status = 'loading';
				getDoctorList(params).then(data => {
					this.load = false;
					this.page = ++ this.page;
					let size = data.list.length
					if(size < this.size){
						this.status = 'nomore';
					}else{
						this.status = 'loadmore'
					}
					if (data){
						this.dataList.push(...data.list)
					}
				}).catch(err => {
					this.load = false;
				})
			},
			onSearch(value){
				this.dataList = []
				this.page = 0
				this.name = value
				this.getData();
			},
			toPage(item){
				uni.navigateTo({
					url:'/pages/registerPblist/index?doctorCode='+item.code
				})
			}
		},
		onReachBottom(){
			if(this.status === 'nomore') return ;
			this.getData();
		},
	}
</script>

<style lang="scss" scoped>
	.register-doctor-main{
		margin-top: 10rpx;
		padding: 20rpx;
		background-color: $uni-bg-color;
		.register-doctor-main-warp{
			// 110 搜索 310 详情 50margin与padding 80 tab
			height: calc(100vh - 110rpx - 310rpx - 50rpx - 80rpx);
			overflow: scroll;
			.item{
				justify-content: flex-start;
				align-items: center;
				>.left{
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
					overflow: hidden;
					>image{
						width: 100%;
						height: 100%;
					}
				}
				>.right{
					flex: 1;
					padding: 20rpx;
					.title{
						font-size: 13px;
						justify-content: space-between;
						align-items: center;
						>.title-left{
							>text:first-child{
								font-size: 16px;
								font-weight: bold;
								margin-right: 10rpx;
							}
						}
					}
					.row{
						margin-top: 10rpx;
						>text{
							font-weight: bold;
							color: #555555;
						}
					}
					.sc{
						height: 60rpx;
						line-height: 30rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box; // 作为弹性伸缩盒子模型显示。
						-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
						-webkit-line-clamp: 2; // 显示的行
					}
				}
			}
		}
	}
</style>
